<template>
  <div class="custom-visit">
    <div class="left">
      <img
        :src="tool.getAssetsFile('header/circle-bg.png')"
        class="circle-image"
        alt=""
        srcset=""
      />
    </div>
    <div class="right">
      <div class="right-title">用户访问量</div>
      <div class="right-data">{{ count }}</div>
      <div class="right-compare">
        <span>同昨天比</span>
        <span class="right-compare-data">
          <img
            :src="tool.getAssetsFile('dataScreen/increase.png')"
            alt=""
            srcset=""
          />{{ compare }}%</span
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import tool from "@/util/imgTool.js";

const props = defineProps<{
  count: number;
  compare: number;
}>();
</script>
<style lang="less" rel="stylesheet/less" scoped>
.custom-visit {
  width: 250px;
  height: 100px;
  display: flex;

  .left {
    .circle-image {
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      background-size: contain;
      background-repeat: no-repeat;
      animation: rotate 5s infinite linear;
    }

    background: url("@/assets/img/header/center-inner1.png") no-repeat center
      43%;
  }

  .right {
    flex: 1;
    margin-left: 10px;

    .right-title {
      font-size: 18px;
    }

    .right-data {
      font-size: 40px;
      color: #00e4ff;
    }

    .right-compare {
      font-size: 14px;
      // display: flex;

      .right-compare-data {
        :first-child {
          display: inline;
          margin: 0 6px;
        }

        color: #f00;
        font-weight: bolder;
      }
    }
  }
}
</style>
